<!--<template>-->
<!--  <div>-->
<!--    <el-card class="box-card">-->
<!--      <template #header>-->
<!--        <div class="card-header">-->
<!--          <el-form :inline="true" :model="formInline">-->
<!--            <el-form-item label="用户名">-->
<!--              <el-input v-model="formInline.user" placeholder="用户名"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-button type="primary" @click="onSubmit" class="el-icon-search" size="medium">查询</el-button>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </div>-->
<!--      </template>-->
<!--      <el-table-->
<!--          :data="tableData"-->
<!--          border-->
<!--          stripe-->
<!--          style="width: 100%">-->
<!--        <el-table-column-->
<!--            prop="id"-->
<!--            label="#"-->
<!--        >-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            prop="username"-->
<!--            label="登录名"-->
<!--        >-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            prop="name"-->
<!--            label="用户名称"-->
<!--        >-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            prop="password"-->
<!--            label="密码"-->
<!--        >-->
<!--        </el-table-column>-->
<!--        <el-table-column label="操作">-->
<!--          <template #default="scope">-->
<!--            <el-button type="info" size="medium" @click="dialogFormVisibles(scope.row)">查看</el-button>-->
<!--            <el-button type="primary" size="medium" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
<!--            <el-button type="danger" size="medium">删除</el-button>-->
<!--          </template>-->

<!--        </el-table-column>-->
<!--      </el-table>-->

<!--      <el-pagination class="footer"-->
<!--                     @size-change="handleSizeChange"-->
<!--                     @current-change="handleCurrentChange"-->
<!--                     background-->
<!--                     :current-page="currentPage"-->
<!--                     :page-sizes="[2, 4, 6, 8]"-->
<!--                     :page-size="pageSize"-->
<!--                     layout="total, sizes, prev, pager, next, jumper"-->
<!--                     :total="total">-->
<!--      </el-pagination>-->
<!--    </el-card>-->
<!--    <el-dialog title="用户信息" v-model="dialogFormVisible" width="30%">-->
<!--      <el-form :model="form">-->
<!--        <el-form-item label="用户名" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.name" readonly autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="用户姓名" :label-width="formLabelWidth" style="margin-top: 15px">-->
<!--          <el-input v-model="form.username" readonly autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="密码" :label-width="formLabelWidth" style="margin-top: 15px">-->
<!--          <el-input v-model="form.password" readonly show-password autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--          <span class="dialog-footer">-->
<!--          <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--    </span>-->
<!--      </template>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script lang="ts">-->
<!--import {defineComponent, onMounted, ref, reactive, toRefs} from 'vue'-->

<!--import {getUserList, PageLiInterface} from "@/api/user";-->

<!--// interface Userss {-->
<!--//   username: string-->
<!--//   age: number-->
<!--// }-->


<!--export default defineComponent({-->
<!--  name: "index",-->
<!--  setup() {-->

<!--    // let userss:Userss = reactive({-->
<!--    //   username: 'zhangsan',-->
<!--    //   age: 20-->
<!--    // })-->
<!--    // let userss = reactive<Userss>({-->
<!--    //   username: 'zhangsan',-->
<!--    //   age: 20-->
<!--    // })-->

<!--    // let userss = reactive({-->
<!--    //   username: 'zhangsan',-->
<!--    //   age: 20-->
<!--    // }) as Userss-->

<!--    const tableData = ref<[] | null>(null)-->
<!--    const total = ref<number>(0)-->
<!--    const currentPage = ref<number>(1)-->
<!--    const pageSize = ref<number>(2)-->
<!--    let pageLi: PageLiInterface = {-->
<!--      currentPage: currentPage.value,-->
<!--      pageSize: pageSize.value-->
<!--    }-->
<!--    const getList = () => {-->
<!--      getUserList('/user/getUserList', pageLi).then(response => {-->
<!--        const {data} = response.data-->
<!--        tableData.value = data.records;-->
<!--        total.value = data.total-->
<!--      })-->
<!--    }-->
<!--    // 改变当前页-->
<!--    const handleCurrentChange = (val: any) => {-->
<!--      pageLi.currentPage = val-->
<!--      getList()-->
<!--    }-->
<!--    // 改变当前页的数量-->
<!--    const handleSizeChange = (val: any) => {-->
<!--      pageLi.pageSize = val-->
<!--      getList()-->
<!--    }-->
<!--    // 页面渲染完成-->
<!--    onMounted(() => {-->
<!--      getList()-->
<!--    })-->

<!--    let ruleForm = reactive({-->
<!--      formInline: {-->
<!--        user: '',-->
<!--      }-->
<!--    })-->
<!--    // 搜索-->
<!--    const onSubmit = () => {-->
<!--      // 获取到用户名-->
<!--      pageLi.username = ruleForm.formInline.user-->
<!--      getUserList('/user/getUserList', pageLi).then(response => {-->
<!--        const {data} = response.data-->
<!--        tableData.value = data.records;-->
<!--        total.value = data.total-->
<!--        ruleForm.formInline.user = ''-->
<!--        pageLi.username = ''-->
<!--      })-->
<!--      return;-->
<!--    }-->

<!--    const form = reactive({-->
<!--      form: {-->
<!--        name: '',-->
<!--        username: '',-->
<!--        password: ''-->
<!--      },-->
<!--      formLabelWidth: '100px'-->
<!--    })-->
<!--    //对话框-->
<!--    let dialogFormVisible = ref<boolean>(false)-->
<!--    const dialogFormVisibles = (row: any) => {-->
<!--      dialogFormVisible.value = true-->
<!--      form.form.name = row.name-->
<!--      form.form.username = row.username-->
<!--      form.form.password = row.password-->
<!--    }-->


<!--    const handleEdit = (index: number, row: any) => {-->
<!--      console.log(index)-->
<!--      console.log(row)-->
<!--    }-->

<!--    //  从reactive中取出的所有属性都是非响应式的  使用 toRefs 可以将reactive中对象变成普通对象 每个普通对象中的每一个属性都是一个ref-->
<!--    return {-->
<!--      ...ruleForm,-->
<!--      onSubmit,-->
<!--      tableData,-->
<!--      total,-->
<!--      currentPage,-->
<!--      pageSize,-->
<!--      handleCurrentChange,-->
<!--      handleSizeChange,-->
<!--      dialogFormVisible,-->
<!--      dialogFormVisibles,-->
<!--      ...form,-->
<!--      handleEdit-->
<!--    }-->

<!--  },-->


<!--})-->
<!--</script>-->

<!--<style scoped>-->
<!--.card-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--}-->

<!--.el-form-item {-->
<!--  margin-bottom: 0px !important;-->
<!--}-->

<!--.footer {-->
<!--  margin-top: 10px;-->
<!--  text-align: left;-->
<!--}-->

<!--.box-card {-->

<!--}-->
<!--</style>-->